<template>
	<view class="home">
		<view class="scrollNav">
			<scroll-view scroll-x class="navscroll">
				<view class="item" :class="navIndex == index ? 'active':''" v-for="(item,index) in tab" @click="clickNav(index,item.id)" :key="item.id">
					{{item.classname}}
				</view>
			</scroll-view>
		</view>
		<view class="noData" v-if="datas.length<=0">
			<image src="/static/images/noData.png" mode="widthFix"></image>
		</view>
		<view class="content" v-else>
			<view class="row" v-for="(value,index) in datas" :key="value.id">
					<newbox :item="value"></newbox>
			</view>
		</view>
		<view class="loading">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多数据了~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '首页',
				tab: [],
				navIndex: 0,
				datas:[],
				currentPage:1,
				id:50,
				loading:0,//0默认 1加载中 2没有更多了
			}
		},
		onLoad() {
			this.getNav();
			console.log("首页");
		},
		onReachBottom() {
			if(this.loading!=2){
				this.getNewsData();
				this.loading = 1;
				this.currentPage++;
			}
		},
		methods: {
			clickNav(index,id){
				this.datas = [];
				this.navIndex = index;
				this.id = id;
				this.currentPage = 1;
				this.loading = 0;
				this.getNewsData();
			},
			//获取导航列表数据
			getNav(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: (res) => {
						this.tab = res.data;
						this.id = this.tab[this.navIndex].id;
						this.getNewsData();
					}
				})
			},
			//获取新闻列表数据
			getNewsData(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{
						cid: this.id,
						page:this.currentPage,
					},
					success: (res) => {
						this.datas = [...this.datas,...res.data];
						if(res.data.length == 0 && this.currentPage>1){
							this.loading = 2;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.scrollNav{
	.navscroll{
		white-space: nowrap;
		height: 100rpx;
		background-color: #F7F8FA;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;
		::v-deep ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background-color: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
		.item{
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
		}
		.active{
			color: #1296db;
		}
	}
}
.content{
	padding: 30rpx;
	padding-top: 130rpx;
	.row{
		border-bottom: 1px dashed #efefef;
		padding: 15rpx 0;
	}
}
.noData{
	padding: 100rpx 0;
	image{
		width: 70%;
		margin: 0rpx 15%;
	}
}
.loading{
	text-align: center;
	font-size: 26rpx;
	color: #888;
	line-height: 2em;
}
</style>
